<template>
    <div :id="id" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
   import echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   import resize from '../mixins/resize'
    export default {
        mixins: [resize],
        props: {
            id: {
                type: String,
                default: 'chart'
            },
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '350px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el,'macarons')
                this.setOptions(this.chartData)

            },
            setOptions({ seriesData } = {}) {
                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        // formatter: '{a} <br/>{b}: {c} ({d}%)'
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        icon: "circle",　
                        // data: ['全损换新', '出险补偿' ,'财产无忧', '驾乘无忧', '轮胎保障', '还款无忧', '借款人意外'],
                        textStyle:{
                            fontSize: 12,
                            fontFamily: "Microsoft YaHei"
                        }
                    },
                    // xAxis: {
                    //     boundaryGap: false,
                    //     axisTick: {
                    //         show: false
                    //     },
                    //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    // },
                    // yAxis: {
                    //     axisTick: {
                    //         show: false
                    //     }
                    // },
                    color:['#85A9FE','#948BF8','#FFC93A','#FF9B85','#94CAFF','#75DDA9','#76ADFF'],
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:seriesData
                            // data: [
                            //     {value: 335, name: '全损换新'},
                            //     {value: 310, name: '出险补偿'},
                            //     {value: 234, name: '财产无忧'},
                            //     {value: 135, name: '驾乘无忧'},
                            //     {value: 1548, name: '轮胎保障'},
                            //     {value: 123, name: '还款无忧'},
                            //     {value: 246, name: '借款人意外'},

                            // ]
                        }
                    ]


                    // series: [
                    //     {
                    //         name: 'chorme',
                    //         data: expectedData,
                    //         itemStyle: {
                    //             normal: {
                    //             color: '#FF005A',
                    //             lineStyle: {
                    //                 color: '#FF005A',
                    //                 width: 2
                    //             }
                    //             }
                    //         },
                    //         smooth: true,
                    //         type: 'line',
                    //         animationDuration: 2800,
                    //         animationEasing: 'cubicInOut'
                    //     },
                    //     {
                    //         name: 'IE',
                    //         type: 'line',
                    //         data: actualData,
                    //         smooth: true,
                    //         itemStyle: {
                    //             normal: {
                    //                 // color: '#3888fa',
                    //                 lineStyle: {
                    //                     // color: '#3888fa',
                    //                     width: 2
                    //                 },
                    //                 areaStyle: {
                    //                     color: '#f3f8ff'
                    //                 }
                    //             }
                    //         },
                    //         animationDuration: 2800,
                    //         animationEasing: 'quadraticOut'
                    //     }
                    // ]
                })

            }
        }
    }
</script>
